<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>店铺报表</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>
    <script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>


    <style>
        .bd-0 {
            display: none;
        }

        .active {
            display: block;
        }
    </style>
</head>

<body>
    <!--头部-->
    <!-- <div class="public-header flex">
        <span class="public-header-left-search"></span>
        <span class="public-header-left-back"></span>
        <span class="public-header-center">店铺报表</span>
        <span class="public-header-right">新建</span>
    </div> -->

    <!--正文-->
    <div class="Shop-report-more bc-gray">
        <!-- <div class="hd flex">
            <a href="javascript:;" class="active">最近30天</a>
        </div> -->
        <div class="bd">
            <div class="bd-1 bd-0 active">
                <div id="container" style="width:100%;height:1.92rem"></div>
             
            </div>

        </div>




    </div>



    <!-- <script src="../js/chart.js"></script> -->
    <script>
        $(function () {
            $('.hd a').click(function () {
                var index = $(this).index();
                $(this).addClass('active').siblings().removeClass('active');
                $('.bd-0').eq(index).addClass('active').siblings().removeClass('active');
            })



        })
    </script>
    <script>
        $(function () {
            Highcharts.setOptions({
                lang: {
                    rangeSelectorZoom: ''
                },
                global: {
                    useUTC: false
                },
          
            });
  
            var monthPayed_datas = [],
                monthRefunds_datas = [];

            $.ajax({
                url: base_url + 'ZITAOHUI/report/lineChart',
                data: {
                    storeid: s_id,
                    type: 2
                },
                success: function (data) {
                    console.log(data)
              
                    let monthPayed = data.extend.data.monthPayed;
            
                    let monthRefunds = data.extend.data.monthRefunds;
                    for (let i = 0; i < monthPayed.length; i++) {
                        let block_arr = [];
                        block_arr[0] = monthPayed[i].tim;
                        block_arr[1] = monthPayed[i].count;
                        monthPayed_datas.push(block_arr);
                    }
                    for (let a = 0; a < monthRefunds.length; a++) {
                        let block_arr = [];
                        block_arr[0] = monthRefunds[a].tim;
                        block_arr[1] = monthRefunds[a].count;
                        monthRefunds_datas.push(block_arr);
                    }
        

                    var chart = new Highcharts.Chart('container', {
                        title: {
                            text: '销售报表',

                        },
                       
                        navigator: {
                            enabled: false
                        },
                        credits: {
                            enabled: false
                        },
                       
                        exporting: {
                            enabled: false
                        },
                        
                        rangeSelector: {
                            enabled: false,
                            inputDateFormat: '%M:%S'
                        },


                        xAxis: {
                            type: "datetime",
                       
                            dateTimeLabelFormats: {
                                millisecond: '%H:%M:%S.%L',
                                second: '%H:%M:%S',
                                minute: '%H:%M',
                                hour: '%H:%M',
                                day: '%m-%d',
                                week: '%m-%d',
                                month: '%y-%m',
                                year: '%Y'
                            },
                         
                        },
                        yAxis: {
                            title: {
                                text: ''
                            },

                        },
                        tooltip: {
                            valueSuffix: '笔'
                        },
                        legend: {
                            layout: 'vertical',
                            align: 'right',
                            verticalAlign: 'middle',
                            borderWidth: 0
                        },
                        series: [{
                                name: '已付款',
                                data: monthPayed_datas
                            },
                            {
                                name: '已退款',
                                data: monthRefunds_datas
                            }
                        ]
                    });

                }
            })





        })
    </script>
</body>

</html>